<template>
  <div class="aky_home">
    <!--头部-->
    <div class="header">
      <div class="top_md">
        <div :class="{'title_span flr is-active':top_menu=='fc_page','title_span flr':top_menu!='fc_page'}" @click="chooseMenu('fc_page')">粉尘</div>
        <div :class="{'title_span flr is-active':top_menu=='yhbz','title_span flr':top_menu!='yhbz'}" @click="chooseMenu('yhbz')">烟花爆竹</div>
        <div :class="{'title_span flr is-active':top_menu=='mk' || top_menu=='sjjc' || top_menu=='fxfx','title_span flr':top_menu!='mk' && top_menu!='sjjc' && top_menu!='fxfx'}">
          <el-dropdown @command="mkClick" trigger="click">
            <span class="el-dropdown-link">
              煤矿<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="'sjjc'">数据监测</el-dropdown-item>
              <el-dropdown-item :command="'fxfx'">风险分析</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div :class="{'title_span flr is-active':top_menu=='bpld' || top_menu=='wkk' || top_menu=='fmks','title_span flr':top_menu!='bpld' && top_menu!='wkk' && top_menu!='fmks'}">
          <el-dropdown @command="fmksClick" trigger="click">
            <span class="el-dropdown-link">
              非煤矿山<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="'bpld'">边坡雷达</el-dropdown-item>
              <el-dropdown-item :command="'wkk'">尾矿库</el-dropdown-item>
              <el-dropdown-item :command="'fmks'">非煤矿山</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div :class="{'title_span flr is-active':top_menu=='whp','title_span flr':top_menu!='whp'}" @click="chooseMenu('whp')">危化品</div>
        <div :class="{'title_span flr is-active':top_menu=='zhjc','title_span flr':top_menu!='zhjc'}" @click="chooseMenu('zhjc')">综合监测</div>
      </div>
      <div :style="'background-image:url('+h_img+')'" class="top_img">
        <div class="title">安全生产风险监测预警中心</div>
      </div>
      <div class="top_md">
        <div :class="{'title_span fll is-active':top_menu=='trq','title_span fll':top_menu!='trq'}" @click="chooseMenu('trq')">天然气</div>
        <div :class="{'title_span fll is-active':top_menu=='gw','title_span fll':top_menu!='gw'}" @click="chooseMenu('gw')">管网</div>
        <div :class="{'title_span fll is-active':top_menu=='dl_page','title_span fll':top_menu!='dl_page'}" @click="chooseMenu('dl_page')">电力</div>
        <div :class="{'title_span fll is-active':top_menu=='qyhx','title_span fll':top_menu!='qyhx'}" @click="chooseMenu('qyhx')">
          <el-dropdown @command="mkClick" trigger="click">
            <span class="el-dropdown-link">
              企业画像<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="'mkqy'">煤矿企业</el-dropdown-item>
              <el-dropdown-item :command="'whqy'">危化企业</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div :class="{'title_span fll is-active':top_menu=='znzs','title_span fll':top_menu!='znzs'}" @click="chooseMenu('znzs')">智能值守</div>
      </div>
    </div>
    <!--内容-->
    <div class="content">
      <div class="mmap zdx-1">
        <mappg v-if="contentView=='pg'"></mappg>
        <mapdycjzhyj v-if="contentView=='dycjzhyj'"  ref="dycjzhyjMap" :vm=vm></mapdycjzhyj>
        <mapgzsjznfxyj v-if="contentView=='gzsjznfxyj'"  ref="gzsjznfxyjMap" :vm=vm></mapgzsjznfxyj>
        <mapjdtqohyj v-if="contentView=='jdtqohyj'"  ref="jdtqohyjMap" :vm=vm></mapjdtqohyj>
        <mapsczcohyj v-if="contentView=='sczcohyj'"  ref="sczcohyjMap" :vm=vm></mapsczcohyj>
        <mapsgzz v-if="contentView=='sgzz'" ref="sgzzMap" :vm=vm></mapsgzz>
        <maptsjc v-if="contentView=='tsjc'"  ref="tsjcMap" :vm=vm></maptsjc>
        <mapzhjc v-if="contentView == 'zhjc'"  ref="zhjcMap" :vm=vm></mapzhjc>
      </div>
      <div class="mmap zdx-99" :style="{'pointer-events':(contentView=='fc_page' || contentView=='dl_page'?'all':'none')}">
        <pg v-if="contentView=='pg'"></pg>
        <gzsjznfxyj v-if="contentView=='gzsjznfxyj'" ref="gzsjznfxyjView" :vm=vm></gzsjznfxyj>
        <dycjzhyj v-show="contentView=='dycjzhyj'" ref="dycjzhyjView" :vm=vm></dycjzhyj>
        <jdtqohyj v-if="contentView=='jdtqohyj'" ref="jdtqohyjView" :vm=vm></jdtqohyj>
        <sczcohyj v-if="contentView=='sczcohyj'" ref="sczcohyjView" :vm=vm></sczcohyj>
        <sgzz v-if="contentView=='sgzz'" ref="sgzzView" :vm=vm></sgzz>
        <tsjc v-if="contentView=='tsjc'"  ref="tsjcView" :vm=vm></tsjc>
        <zhjc v-show="contentView=='zhjc'" ref="zhjcView" :vm=vm></zhjc>
        <div class="fc_page" v-if="contentView=='fc_page'">
          <vae-iframe style="position:absolute;left:calc((100vw - 1920px)/2)" :height="iheight" :width="iwidth" :url="'https://datav.aliyuncs.com/share/369388d8a959f033fe481911cb5f4374'"></vae-iframe>
        </div>
        <div class="dl_page" v-if="contentView=='dl_page'">
          <vae-iframe style="position:absolute;left:calc((100vw - 1920px)/2)" :height="iheight" :width="iwidth" :url="'https://datav.aliyuncs.com/share/21e8f46ab5404d7025905fb7babe23d8'"></vae-iframe>
        </div>
      </div>
      <div class="menu_btm" v-if="top_menu == 'znzs'">
        <div class="menu_btn" v-for="(item,index) in btm_menu_list" @click="chooseBtmMenuBtn(item)" @mouseover="item.hover=true" @mouseout="item.hover=false">
          <div :class="{'menu_btn_l':!item.hover,'menu_btn_l_hover':item.hover || contentView==item.name}"></div>

          <div :class="{'menu_btn_m_hover':item.hover || contentView==item.name,'menu_btn_m':!item.hover}">{{item.title}}</div>

          <div :class="{'menu_btn_rend':!item.hover,'menu_btn_rend_hover':item.hover || contentView==item.name}"></div>

          <div class="x_line" v-if="index != btm_menu_list.length-1"></div>
        </div>
      </div>
      <!-- <div class="menu_btm" v-if="top_menu == 'zhjc'">
        <div class="menu_btn" v-for="(item,index) in btm_zhjc_menu_list" @click="chooseBtmMenuBtn(item)" @mouseover="item.hover=true" @mouseout="item.hover=false">
          <div :class="{'menu_btn_l':!item.hover,'menu_btn_l_hover':item.hover || contentView==item.name}"></div>

          <div :class="{'menu_btn_m_hover':item.hover || contentView==item.name,'menu_btn_m':!item.hover}">{{item.title}}</div>

          <div :class="{'menu_btn_rend':!item.hover,'menu_btn_rend_hover':item.hover || contentView==item.name}"></div>

          <div class="x_line" v-if="index != btm_zhjc_menu_list.length-1"></div>
        </div>
      </div> -->
    </div>
    <!-- <div class="frame_panel" v-if="top_menu != 'znzs' && top_menu != 'zhjc' && top_menu != 'fc_page'">
      <vae-iframe style="position:absolute;left:calc((100vw - 1920px)/2)" :height="iheight" :width="iwidth" :url="frame_url"></vae-iframe>
    </div> -->
  </div>

</template>

<script>
import pg from '@/views/index'
import dycjzhyj from '@/views/dycjzhyj'
import jdtqohyj from '@/views/jdtqohyj'
import sczcohyj from '@/views/sczcohyj'
import sgzz from '@/views/sgzz'
import tsjc from '@/views/tsjc'
import gzsjznfxyj from '@/views/gzsjznfxyj'
import zhjc from '@/views/zhjc'
import mappg from '@/components/map/map_pg.vue'
import mapdycjzhyj from '@/components/map/map_dycjzhyj.vue'
import mapgzsjznfxyj from '@/components/map/map_gzsjznfxyj.vue'
import mapjdtqohyj from '@/components/map/map_jdtqohyj.vue'
import mapsczcohyj from '@/components/map/map_sczcohyj.vue'
import mapsgzz from '@/components/map/map_sgzz.vue'
import maptsjc from '@/components/map/map_tsjc.vue'
import mapzhjc from '@/components/map/map_zhjc.vue'
import vaeIframe from '@/components/panel-iframe'

const pageName = "modules_home";

export default {
  name: pageName,
  components:{ pg, dycjzhyj, jdtqohyj, sczcohyj, sgzz, tsjc, gzsjznfxyj, zhjc, mappg, mapdycjzhyj, mapgzsjznfxyj, mapjdtqohyj, mapsczcohyj, mapsgzz, maptsjc, mapzhjc, vaeIframe },
  data() {
    return {
      top_menu:'zhjc',
      contentView: "zhjc",
      h_img:"/" + process.env.VUE_APP_ROOT + "/images/top.png",
      now_top_menu:'',
      btm_menu_list:[
        {title:'首页',hover:false,name:"pg"},
        {title:'分析预警',hover:false,name:"gzsjznfxyj"},
        {title:'事故追踪',hover:false,name:"sgzz"},
        // {title:'态势监测',hover:false,name:"tsjc"},
        {title:'极端天气耦合预警',hover:false,name:"jdtqohyj"},
        {title:'地压冲击综合预警',hover:false,name:"dycjzhyj"},
        {title:'综合分析耦合预警',hover:false,name:"sczcohyj"},
      ],
      btm_zhjc_menu_list:[
        {title:'煤矿',hover:false,name:"mk"},
        {title:'区域综合',hover:false,name:"gzsjznfxyj"},
        {title:'非煤矿山',hover:false,name:"sgzz"},
        {title:'危化',hover:false,name:"tsjc"},
        {title:'烟花爆竹',hover:false,name:"jdtqohyj"}
      ],
      menu_btn_hover:false,
      pg_data:{},
      dycjzhyj_data:{},
      gzsjznfxyj_data:{},
      jdtqohyj_data:{},
      sczcohyj_data:{},
      sgzz_data:{},
      tsjc_data:{},
      zhjc_data:{},
      vm:null,
      iheight:'calc(1080px - 9vh)',
      iwidth:'1920px',
      frame_url:''
    }
  },
  created(){
    this.vm=this;
  },
  methods:{
    chooseBtmMenuBtn(item){
      this.contentView = item.name;
    },
    chooseMenu(val){
      if(val == 'zhjc' || val == 'fc_page' || val == 'dl_page'){
        this.contentView = val;
        this.top_menu = val;
      }
      if(val == 'znzs'){
        this.contentView = 'pg';
        this.top_menu = val;
      }
      if(val == 'whp'){//危化品
        window.open('http://10.18.2.192:8080/analystrunner/!1f54c27f-798b-4c88-b1bd-5b2aa7220bc3/#/fd46afc7-2da6-4813-aebc-e162c980f400?isHome=&page=1','_blank');
      }
      if(val == 'bpld'){//边坡雷达
        window.open('AKYbpld://" title="边坡雷达监测预警系统"','_blank');
      }
      if(val == 'yhbz'){//烟花爆竹
        window.open('http://167230vb01.51mypc.cn/dist/','_blank');
      }
      if(val == 'trq'){//天然气
        window.open('https://egas.cnfin.com/#/home/index','_blank');
      }

    },
    fmksClick(val){
      if(val == 'wkk'){//尾矿库
        window.open('http://59.255.61.17:8018','_blank');
      }
      if(val == 'fmks'){//非煤矿山
        window.open('http://172.16.2.144:8787/logins?name=wkkTest4&password=%277u8i9o&%2a%28%27','_blank');
      }
    },
    mkClick(val){
      if(val == 'mkqy'){//企业画像-煤矿企业
        window.open('http://223.99.169.187:41351/analystrunner/mkpc','_blank')
      }
      if(val == 'whqy'){//企业画像-危化企业
        window.open('http://223.99.169.187:41351/analystrunner/whp2','_blank')
      }
      if(val == 'sjjc'){//数据监测
        window.open('http://10.18.2.192:8080/analystrunner/!1f54c27f-798b-4c88-b1bd-5b2aa7220bc3/#/372d6ca6-11bc-4688-8ca7-642243cea8a3?isHome=','_blank')
      }
      if(val == 'fxfx'){//风险分析
        // window.open('http://171.217.93.19:17099/login?username=mms&password=longruan@123&target=/vae/index','_blank')
        window.open('http://124.70.11.184:8007/login?username=mms&password=longruan%40123&target=/vae/index','_blank')
      }
    }
  },
  mounted() { }
}
</script>
<style scoped>

</style>
